<script>
import NavHead from '@/components/NavHead.vue'
import FooterBar from '@/components/FooterBar.vue'
import BackTop from '@/components/BackTop.vue'

export default {
  name: 'Event',
  components: {
    NavHead,
    FooterBar,
    BackTop

  },
  data: function () {
    return {
      user: null,
      handbook: '',
      htmlCode: '',
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true // 预览
      }
    }
  },
  methods: {
    writeMd (value, render) {
      // this.htmlCode = mavonEditor.getMarkdownIt().render(this.handbook)
      // this.htmlCode = render
      // this.getNavigation()
    },
    doUpload () {
      // this.$refs.workUpload.action=""
    }
  }
}
</script>
<template>
  <el-container class="upload-container">
    <!-- header -->
    <el-header style="height:auto">
      <nav-head :user="user"></nav-head>

    </el-header>
    <!-- main -->
    <el-main>
      <el-row class="common-content-row">
        <el-col>
          <div>
            <p></p>
          </div>
        </el-col>
        <el-col>
          <div class="common-content">
            <div class="upload-info">
              <div class="info">
                <!-- <el-input v-model="input"
                          placeholder="请输入作品名"></el-input>
                <el-input v-model="input"
                          placeholder="请输入作品名"></el-input> -->
              </div>
              <!-- upload -->
              <div class="upload-content">
                <!-- action="https://jsonplaceholder.typicode.com/posts/" -->
                <el-upload class="upload"
                           drag
                           action=""
                           ref="workUpload"
                           multiple>
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                  <div class="el-upload__tip"
                       slot="tip">
                    不超过50M
                    <span class="upload-button">
                      <el-button type="primary"
                                 @click.prevent="doUpload">上传作品</el-button>
                    </span>
                  </div>
                </el-upload>

              </div>
            </div>
            <!-- md -->
            <div class="md-div">
              <mavon-editor :toolbars="toolbars"
                            style="min-height: 500px;"
                            @change="writeMd"
                            v-model="handbook" />
            </div>

          </div>
        </el-col>
        <el-col>
          <div class="common-right-content">
            <back-top></back-top>
          </div>
        </el-col>
      </el-row>
    </el-main>
    <!-- footer -->
    <el-footer style="height:auto">
      <footer-bar></footer-bar>
    </el-footer>
  </el-container>
</template>

<style scoped>
@import "../assets/css/common.css";
.upload-container {
  height: 100%;
}
.upload-content {
  display: flex;
  justify-content: flex-start;
}

.upload-info {
  display: flex;
  align-items: center;
}

.md-div {
  margin-top: 30px;
}
.upload-button {
  margin: 30px;
}
.upload >>> .el-upload-dragger {
  width: 480px;
  height: 220px;
}
</style>
